<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="d1" class="box" onclick="alert('box')" onmouseover="fun()"></div>
    <script>
        // 事件源
        // 事件类型
        // 事件处理程序: 事件触发时执行的函数

        // 1. 行内绑定: 在开始标签中添加一个属性
        function fun() {
            console.log("fun");
        }

        // 2. ele.属性
        // 相同的事件只能绑定一次,执行的是最后一个
        // var box = document.querySelector(".box");
        var d1 = document.getElementById("d1");
        box.onclick = function () {
            console.log(1 + 1);
        }
        box.onclick = function () {
            console.log("1 + 1");
        }

        // // 销毁事件 元素.事件类型 = null
        box.onclick = null;

        // // 3. ele.addEventListener(事件类型,事件处理程序,[冒泡或者捕获])
        // // 事件类型不加on
        // // 相同的事件可以注册多次

        // // 点击box把背景颜色变为红色
        box.addEventListener("click", function () {
            box.style.background = "red";
        })

        // 点击box添加一个<a href = "#"> 点击</a>
        box.addEventListener("click", function () {
            // 创建一个a链接
            var link = document.createElement("a");
            // 给a添加一个属性
            // link.href = "#";
            // link["href"] = "#";
            link.setAttribute("href", "#");
            console.log(link);
            // 给a添加内容
            link.innerHTML = "点击";

            // 把a插入到box中
            box.appendChild(link);
        })

        // // 添加事件时,第二个参数可以是一个函数
        // box.addEventListener("click", fun1);
        function fun1() {
            console.log("不凡学院");
        }

        // 销毁事件
        // ele.removeEventListener(事件类型,事件创建时传入的参数)
        // 需要跟创建时候的参数保持一致
        // 支持销毁的类型是 第二个参数是函数名的
        box.removeEventListener("click", fun1);
        // 不能销毁
        box.removeEventListener("click", function () {
            console.log("不凡学院");
        }
        )

        // 不支持销毁
        box.removeEventListener("click", function () {
            box.style.background = "red";
        })

        // IE8 以下兼容问题
        // target.attachEvent(type, listener);
        // target.detachEvent(type, listener);
        /**
         * 兼容IE8和标准浏览器
         * el 绑定元素
         * type 事件类型,IE8要加on
         * func 执行方法
         **/
        function myAddEventListener(el, type, func) {
            // attachEvent 是IE 专有的方法
            // 判断元素的attachEvent属性是否存在
            // 不是ie打开,就没有属性值,null隐式转换为false
            if (el.attachEvent) {
                el.attachEvent("on" + type, func);
            } else {
                el.addEventListener(type, func);
            }
        }

        // 执行函数
        // 给盒子绑定一个onmousemove事件,执行的是打印 不凡学院
        myAddEventListener(d1, "mousemove", fun1)
       /*  var ie = {
             attachEvent: function(){
 
             }
         }
         var fire = {
             addEventListener: function(){
 
             }
         } */
    </script>
</body>

</html>